<template>
  <div class="dialogBox" :cardname="cardname">
    <div class="cover" v-show="showCover"></div>
    <transition name="slide">
      <div class="window" v-show="show">
        <div class="d1">
          <p class="p1">如果您已成功转账，请千万不要取消交易</p>
          <label class="p4" for="check">
            <input type="checkbox" v-model="hasRecharge" id="check">
            <span class="checkstyle"></span>
            <span class="text">我确认还没有转账</span>
          </label>
        </div>
        <div class="btns">
          <button class="yellowbtn cancel" @click.stop="hide">我再想想</button>
          <button class="yellowbtn sure" :class="hasRecharge ? 'select' : ''" @click.stop="callback">确认</button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {
        showCover : false,
        show : false,
        name: '',
        hasRecharge : false,
      }
    },
    props: {
      'cardname': {
        /*卡主名字*/
        type: String,
        default: ''
      }
    },
    mounted() {
      this.name = this.cardname ? this.cardname : '';
    },
    methods: {
      changeCardName(name){
        //改变 卡主
        if( name ){
          this.name = name;
        }
      },
      callback(){
        /*点击确定*/
        if(this.hasRecharge){
          this.hide();
          this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
        }
      },
      hide(){
        /*隐藏弹窗*/
        let thiz = this;
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
        this.show = false;
        thiz.timeout = setTimeout(function () {
          thiz.showCover = false;
          clearTimeout(thiz.timeout);
          thiz.timeout = null;
        },200);
        // thiz.canScroll();/*关闭弹窗，让页面可以上下移动*/
      },
      dialogShow(){
        /*显示弹窗*/
        this.show = true;
        this.showCover = true;
        //this.noScroll();/*显示弹窗，让页面无法上下移动*/
      }
    }
  }
</script>
<style lang="less" scoped>
  .window {
    padding:0rem;width: 5.6rem;height:auto;position: fixed;
    top:50%;left: 50%;margin-left: -2.8rem;background: #fff;border-radius: 0.1rem;overflow: hidden;z-index: 6;color: #262626;
    >.d1{
      padding: 0.48rem 0.28rem;padding-bottom: 0rem;
      >.p1{
        font-size: 0.28rem;text-align: left;
      }
      >.p4{
        color: #F15342;margin-top: 0.2rem;display: block;position: relative;padding-left: 0.36rem;overflow: hidden;padding-bottom: 0.44rem;
        >.checkstyle{
          display: block;position: absolute;z-index: 1;left: 0;top: 0;width: 0.28rem;height: 0.28rem;border: 0.01rem solid#EAEAEA;
          border-radius: 0.04rem;
        }
        >input{
          width: 100%;height: 100%;position: absolute;z-index: 1;left: 0;top: 0;opacity: 0;
          &:checked+.checkstyle{
            border: 0;background: url("../common/imgs/checkstyle_box.png") center center no-repeat;background-size: 100% 100%;
          }
        }
        >.text{
          font-size: 0.24rem;line-height: 0.28rem;float: left;
        }
      }
    }
    >.btns{
      text-align: center;padding-bottom: 0.44rem;
      >button{
        width: 1.7rem;text-align: center;height: 0.6rem;font-size: 0.24rem;margin-top: 0;
        &.cancel{
          background: #fff;border: 0.01rem solid#A0A0A0;color: rgba(38, 38, 38, 0.77);margin-right: 0.46rem;
        }
        &.sure{
          background: #DDDDDD;
          &.select{
            background: #ffd203;
          }
        }
      }
    }
  }
  /*动画*/
  .window{
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  @media screen and (min-width: 1025px) {
    .window{width:  380px;left: 50%;margin-left:-190px;}
  }
</style>
